<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>智慧社区门禁系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="static/admin/css/font.css">
    <link rel="stylesheet" href="static/admin/css/xadmin.css">
    <script type="text/javascript" src="static/admin/js/js.js"></script>
    <script type="text/javascript" src="static/admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="static/admin/js/xadmin.js"></script>
    <!-- <script type="text/javascript" src="static/admin/js/echarts.js"></script> -->
	<style>
		*{
			font-size:20px
		}
	</style>
  </head>
  <body>
    <div class="x-body">
        <form class="layui-form" action="{:url('admin/Apiuser/apiuser')}?userid={$userid}&serial={$serial}" method="post" enctype="multipart/form-data">
            <div class="layui-form-item" >
                <label for="username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>所属小区:
                </label>
                <div class="layui-input-inline" style="width: 300px; height: 60px;">
                    <select name="community" lay-filter="community" id="community">
                        <option value=""><------选择小区------></option>
                        <option value="{$communitylist.id}">{$communitylist.name}</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>所属组团:
                </label>
                <div class="layui-input-inline" style="width: 300px; height: 60px;">
                    <select name="group" id="group" lay-filter="group">
                        <option value="">所属组团</option>
                        {if isset($groups)}
                        {foreach $groups as $group}
                        <option value="{$group}">{$group}幢</option>
                        {/foreach}
                        {/if}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>所属楼栋:
                </label>
                <div class="layui-input-inline" style="width: 300px; height: 60px;">
                    <select name="building" id="building" lay-filter="building">
                        <option value="">所属楼栋</option>
                        {if isset($buildings)}
                        {foreach $buildings as $build}
                        <option value="{$build}">{$build}幢</option>
                        {/foreach}
                        {/if}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>所属单元:
                </label>
                <div class="layui-input-inline" style="width: 300px; height: 60px;">
                    <select name="unit" id="unit"  lay-filter="unit">
                        <option value="">所属单元</option>
                        {if isset($units)}
                        {foreach $units as $uni}
                        <option value="{$uni}">{$uni}单元</option>
                        {/foreach}
                        {/if}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>所属房号:
                </label>
                <div class="layui-input-inline" style="width: 300px; height: 60px;">
                    <select name="room" id="room"  lay-filter="room">
                        <option value="">所属房号</option>
                        {if isset($rooms)}
                        {foreach $rooms as $roo}
                        <option value="{$roo.room}">{$roo.room}室</option>
                        {/foreach}
                        {/if}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>关系:</label>
                <div class="layui-input-block">
                    <input type="radio" lay-skin="primary" value="1" title="业主" name="relation">
                    <input type="radio" lay-skin="primary" value="2" title="家人" name="relation">
                    <input type="radio" lay-skin="primary" value="3" title="租客" name="relation">
                    <input type="radio" lay-skin="primary" value="4" title="访客" name="relation">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>姓名:
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="ownername" name="name" required="" lay-verify="nikename"
                    autocomplete="off" class="layui-input" value="" style="width:300px; height: 50px; font-size: 18px;"  placeholder="请输出姓名">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="L_username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                        <span class="x-red">*</span>手机号:
                    </label>
                    <div class="layui-input-inline">
                        <input type="text"  id="phone" name="phone" lay-verify="required|phone" autocomplete="off" placeholder="请输入手机号" class="layui-input"style="height: 50px; font-size: 18px;">
                    </div>
                    <div id="sendCode" onclick="sendCode()" style="border: 1px solid #FFB800;border-radius:6px; padding: 10px!important;text-align: center;color: #999!!important;cursor: pointer;" class="layui-form-mid layui-word-aux" >发送验证码</div>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label" style="font-size:21px;width: 120px; height: 32px;">
                    <span class="x-red">*</span>验证码:
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="ownername" name="number" required="" lay-verify="nikename"
                    autocomplete="off" class="layui-input" value="" style="width:300px; height: 50px; font-size: 18px;" placeholder="请输入验证码">
                </div>
            </div>
        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                提交认证
            </button>
        </div>
    </form>
    </div>

    <script>
        layui.use(['form','layer'], function(){
            $ = layui.jquery;
        var form = layui.form
        ,layer = layui.layer;
        
        //自定义验证规则
        });
    </script>
    <script>
        layui.use(['form'], function() {
            var form = layui.form
            form.on('select(community)', function(f){
                var url = "{:url('admin/Apiuser/fetchdata')}"
                $.post(url, {community: f.value, type: 1}, function(data) {
                    $('#group').html("")
                    var option = "<option value=''>所有组团</option>"
                    $('#group').append(option)
                    for (var i = 0; i < data.length; i++) {
                    option = "<option value='" + data[i] + "'>" + data[i] + "</option>"
                    $('#group').append(option)
                    }
                    
                    form.render('select')
                })
                
                $('#community').data('community', f.value)
            })

            form.on('select(group)', function(f){
                var data_community = $('#community').data('community')
                var get_community = "<?php if (isset($community)) { echo $community;}?>"
                var community = typeof data_community === 'undefined' ? get_community : data_community
                var url = "{:url('admin/Apiuser/fetchdata')}"
                $.post(url, {community: community, group: f.value, type: 2}, function(data) {
                    $('#building').html("")
                    var option = "<option value=''>所有楼栋</option>"
                    $('#building').append(option)
                    for (var i = 0; i < data.length; i++) {
                        option = "<option value='" + data[i] + "'>" + data[i] + "幢</option>"
                        $('#building').append(option)
                    }
                    $('#group').data('group', f.value)
                    form.render('select')
                })
            })
    
            form.on('select(building)', function(f){
                var data_community = $('#community').data('community')
                var get_community = "<?php if (isset($community)) { echo $community;}?>"
                var community = typeof data_community === 'undefined' ? get_community : data_community

                var data_group = $('#group').data('group')
                var get_group = "<?php if (isset($group)) { echo $group;}?>"
                var group = typeof data_group === 'undefined' ? get_group : data_group

                var url = "{:url('admin/Apiuser/fetchdata')}"
                $.post(url, {building: f.value, community: community, group: group, type: 3}, function(data) {
                $('#unit').html("")
                var option = "<option value=''>所有单元</option>"
                $('#unit').append(option)
                for (var i = 0; i < data.length; i++) {
                    option = "<option value='" + data[i] + "'>" + data[i] + "单元</option>"
                    $('#unit').append(option)
                }
                $('#building').data('building', f.value)
                form.render('select')
                })
            })
    
            form.on('select(unit)', function(f){
                var data_community = $('#community').data('community')
                var get_community = "<?php if (isset($community)) { echo $community;}?>"
                var community = typeof data_community === 'undefined' ? get_community : data_community

                var data_group = $('#group').data('group')
                var get_group = "<?php if (isset($group)) { echo $group;}?>"
                var group = typeof data_group === 'undefined' ? get_group : data_group

                var data_building = $('#building').data('building')
                var get_building = "<?php if (isset($building)) { echo $building;}?>"
                var building = typeof data_building === 'undefined' ? get_building : data_building
        
                var url = "{:url('admin/Apiuser/fetchdata')}"
                $.post(url, {unit: f.value, community: community, group: group, building: building, type: 4}, function(data) {
                $('#room').html("")
                var option = "<option value=''>所有房间</option>"
                $('#room').append(option)
                for (var i = 0; i < data.length; i++) {
                    option = "<option value='" + data[i] + "'>" + data[i] + "室</option>"
                    $('#room').append(option)
                }
                $('#unit').data('unit', f.value)
                form.render('select')
                })
            })
    
        })
    </script>
    <script>
        var sendCode = document.getElementById("sendCode");
        console.log(sendCode)
        var timer = null;
        var Number = 60;
        var fa = true;
        sendCode.onclick = function() {
            var phone = $("#phone").val();
            var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
            var url = "{:url('admin/Apiuser/personnel')}"
            if(!myreg.test(phone)){
                layer.alert("请输入正确的手机号码！", {
                    title: '系统提示'
                })
            }else {
                if(fa) {
                    fa = false;
                    $.post(url,{phone: phone},function (e) {
                            if(e.code == '1'){
                                layer.alert(e.info, {
                                    title: '系统提示'
                                })
                            }
                            if(e.code == '0'){
                                layer.alert(e.info, {
                                    title: '系统提示'
                                })
                            }
                        });
                    sendCode.innerHTML = "";
                    timer = setInterval(function() {
                        Number--
                        if(Number <= 0) {
                            clearInterval(timer);
                            timer = null;
                            Number = 60;
                            sendCode.innerHTML = "重新发送";
                            fa = true;
                        } else {
                            sendCode.innerHTML = Number + "s";
                        }
                    }, 1000)
                }
            }
        }
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();</script>
</body>

</html>